<template>
  <div class="user-management">
    <h2>用户管理</h2>
    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>邮箱</th>
          <th>注册日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.registrationDate }}</td>
          <td>
            <button @click="viewUserDetails(user.id)">查看</button>
            <button @click="editUser(user.id)">编辑</button>
            <button @click="confirmDelete(user.id, user.username)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 确认删除弹窗 -->
    <div v-if="showDeleteModal" class="modal-overlay">
      <div class="modal">
        <h3>确认删除</h3>
        <p>确定要删除用户 "{{ deleteUsername }}" 吗？</p>
        <button @click="performDelete">确认</button>
        <button @click="cancelDelete">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: [], // 用户列表数据
      showDeleteModal: false, // 控制删除确认弹窗
      deleteUserId: null, // 要删除的用户 ID
      deleteUsername: "", // 要删除的用户名
    };
  },
  created() {
    this.loadUsers(); // 初始化加载用户数据
  },
  methods: {
    // 加载用户列表
    async loadUsers() {
      try {
        const response = await axios.get("http://localhost:9090/users");
        this.users = response.data.data.map(user => ({
          id: user.ID,
          username: user.username,
          email: user.email,
          registrationDate: user.CreatedAt, // 映射为前端字段
        }));
      } catch (error) {
        console.error("加载用户失败", error);
      }
    },

    // 查看用户详情
    viewUserDetails(id) {
      console.log("查看用户详情 ID:", id);
      this.$router.push(`/users/detail/${id}`); // 确保路由路径与后端定义一致
    },

    // 编辑用户
    editUser(id) {
      console.log("编辑用户 ID:", id);
      this.$router.push(`/users/edit/${id}`); // 确保路径与文章管理一致
    },

    // 删除用户操作
    confirmDelete(id, username) {
      this.showDeleteModal = true;
      this.deleteUserId = id;
      this.deleteUsername = username;
    },
    async performDelete() {
      try {
        await axios.delete(`http://localhost:9090/users/${this.deleteUserId}`);
        this.users = this.users.filter(user => user.id !== this.deleteUserId);
        this.cancelDelete();
      } catch (error) {
        console.error("删除用户失败", error);
      }
    },
    cancelDelete() {
      this.showDeleteModal = false;
      this.deleteUserId = null;
      this.deleteUsername = "";
    },
  },
};
</script>

<style scoped>
.user-management {
  width: 80%;
  margin: 20px auto;
}

h2 {
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  padding: 10px;
  text-align: left;
}

button {
  padding: 5px 10px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #34a77b;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.modal h3 {
  margin: 0 0 10px;
}

.modal p {
  margin: 10px 0;
}

.modal button {
  margin-right: 10px;
}
</style>
